<template>
	<view>
		<!-- 弹出层 -->
		<u-popup v-model="show" mode="bottom">
			<view class="popup_inline">
				<view>{{list[0]}}</view>
				<view>{{list[1]}}</view>
				<view>{{list[2]}}</view>
				<view>{{list[3]}}</view>
			</view>
		</u-popup>
		<!-- 步骤条 -->
		<view class="step">
			<u-steps :list="numList" mode="number" :current="current" active-color="#3ec1f8"></u-steps>
		</view>
		<!-- 三角形 -->
		<view @click="GetCurrent()" :class="['sj', 'sj'+current]"></view>
		<!-- 信息区 -->
		<view class="message">
			<!-- 滚动消息 -->
			<view class="notice">
				<u-notice-bar type="primary" :more-icon="true" mode="vertical" :list="list" @getMore="getMoreHandler">
				</u-notice-bar>
			</view>
			<sun-medicine :progress="current"></sun-medicine>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				numList: [{
					name: '问诊'
				}, {
					name: '开药'
				}, {
					name: '发药'
				}, {
					name: '签收'
				}],
				current: 2,
				list: [
					'问诊：医生对您进行诊断，并准备开药',
					'开药：医生针对您的状况给您开药',
					'发药：医生开完药后，由系统自动帮您发药',
					'签收：在您取到自己的药后，将转变成这个状态'
				],
				show: false
			};
		},
		computed: {
			...mapState('m_user', ['userinfo'])
		},
		created() {
			this.GetCurrent()
		},
		methods: {
			getMoreHandler() {
				this.show = true
			},
			async GetCurrent() {
				let openid = this.userinfo.code_response.openid
				const {data: res} = await uni.$http.get('/state/?token=' + openid)
				this.current = res.current
				// console.log(res);
			}
		}
	}
</script>

<style lang="scss">
	body {
		background-color: #f3f4f8;
	}

	.step {
		margin-top: 20px;
	}

	// 2 8 14 20rem
	.sj {
		width: 0px;
		height: 0px;
		border: 10px solid transparent;
		border-bottom-color: white;
		// margin-left: 2rem;
	}

	.sj0 {
		margin-left: 2rem;
	}

	.sj1 {
		margin-left: 8rem;
	}

	.sj2 {
		margin-left: 14rem;
	}

	.sj3 {
		margin-left: 20rem;
	}

	.message {
		width: 20rem;
		height: 30rem;
		background-color: white;
		margin: 0 auto;

		.notice {
			padding-top: 5px;

			.u-notice-bar {
				border-radius: 10px;
			}
		}
	}

	.popup_inline {
		width: 20rem;
		height: 25rem;
		margin: 0 auto;
		margin-top: 2rem;

		view {
			font-size: 18px;
			margin: 15px 0;
			// margin-bottom: 15px;
		}
	}
</style>
